<template>
    <span class="span">
        <slot name="content">默认内容</slot>
    </span>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'SpanHoverComp',
    setup() {}
})
</script>

<style lang="scss" scoped>
.span {
    width: fit-content;
    background: linear-gradient(to left, red, blue) no-repeat bottom right;
    background-size: 0 2px;
    transition: background-size 0.8s;
    cursor: pointer;

    &:hover {
        background-position: bottom left;
        background-size: 100% 2px;
    }
}
</style>
